<template>
  <div class="courier-container">
    <el-card class="filter-card">
        <template #header>
          <div class="courier-header">
            <span>用户管理</span>
            <el-button class="right" type="primary">添加用户</el-button>
          </div>
        </template>


        <el-table>
            <el-table-column
              prop="id"
              label="id">
            </el-table-column>
            <el-table-column
              prop="name"
              label="用户名">
            </el-table-column>
            <el-table-column
              prop="phone"
              label="电话">
            </el-table-column>
            <el-table-column
              prop="adress"
              label="地址">
            </el-table-column>
            <el-table-column align="right">
              <template #header>
                <el-input v-model="search" size="mini" placeholder="根据id搜索" />
              </template>
              <template>
                <el-button size="mini" type="primary">修改</el-button>
                <el-button size="mini" type="danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
      </el-card>

      <el-pagination
        :current-page="currentPage"
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :page-size="pagesize">
      </el-pagination>

      <el-dialog
      :visible.sync="editNetworkVisible"
      title="修改网点信息"
      width="50%"
      append-to-body
      >
      <el-form ref="editNetwork" :model="editNetwork" :rules="rules">
        <el-form-item label="id" prop="id">
          <el-input v-model="editNetwork.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="num">
          <el-input v-model="editNetwork.num"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="num">
          <el-input v-model="editNetwork.num"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="num">
          <el-input v-model="editNetwork.num"></el-input>
        </el-form-item>
        <el-form-item label="负责人" prop="hasquarantine">
          <el-input v-model="editNetwork.hasquarantine"></el-input>
        </el-form-item>
      </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="editNetworkVisible = false">取消</el-button>
              <el-button type="primary" @click="editNetworkList(editNetwork.id, editNetwork)">确定</el-button>
            </span>
          </template>
    </el-dialog>

    <el-dialog
      :visible.sync="addNetworkVisible"
      title="添加网点信息"
      width="50%"
      append-to-body>
      <el-form ref="addNetwork" :model="addNetwork" :rules="rules">
        <el-form-item label="id:" prop="id">
          <el-input v-model="addNetwork.id"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="num">
          <el-input v-model="addNetwork.num"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="num">
          <el-input v-model="addNetwork.num"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="num">
          <el-input v-model="addNetwork.num"></el-input>
        </el-form-item>
        <el-form-item label="负责人" prop="hasquarantine">
          <el-input v-model="addNetwork.hasquarantine"></el-input>
        </el-form-item>
      </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="addNetworkVisible = false">取消</el-button>
              <el-button type="primary">确定</el-button>
            </span>
          </template>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'VourierIndex',
  data () {
    return {
      form: {
        delivery: false,
        defaultTime2: [
          new Date(2000, 1, 1, 12, 0, 0),
          new Date(2000, 2, 1, 8, 0, 0)
        ],
        stations: ''
      },
      Network: [
        {
          id : '1',
          num: '11',
          hasquarantine: '123'
        }
      ],
      search: '',
      currentPage: 1,
      pagesize: 10,
      editNetworkVisible: false,
      editNetwork: {},
      postNetwork: {
        id: '',
        num: '',
        hasquarantine: ''
      },
      addNetwork: {},
      addNetworkVisible: false,
      rules: {
        id: { required: true, message: 'id不能为空', trigger: 'blur' },
        num: { required: true, message: '名称不能为空', trigger: 'blur' }
      }
    }
  },
  methods: {
    handleCurrentChange (currentPage) {
      this.currentPage = currentPage
      console.log(this.currentPage) // 点击第几页
    },
    handleAdd () {
      this.addNetworkVisible = !this.addNetworkVisible
    }
  },
  created () {
  }
}
</script>

<style>
.family-header .right{
  float: right;
}
</style>

<style>
.courier-header .right{
  float: right;
}
</style>